<template>
	<div class="convas-box">
		<canvas :style="{width:`${width}px`,height:`${height}px`}" @touchstart="onTouchStart" @touchmove="onTouchMove"
			@touchend="onTouchEnd" @touchcancel="onTouchEnd" canvas-id="myCanvas" id="myCanvas"
			@error="canvasIdErrorCallback"></canvas>
	</div>
</template>

<script>
	const T_K = 0.025;
	const MIN_IMPULSE = 0.5; // 缓动的最小冲量
	import PlanetCalculator from './PlanetCalculator.js'
	export default {
		props: {
			width: {
				type:Number,
				default:200
			},
			height:{
				type:Number,
				default:200
			},
			stick: {
				type:Number,
				default:1
			} // 粘性，粘性越小 阻尼动画越久
		},
		data() {
			return {
				list: [],
				ctx: null,
				movePoints: [],
				lastMovePoint: null,
				transitionTimer:null
			}
		},
		created() {},
		mounted(e) {
			this.ctx = uni.createCanvasContext('myCanvas', this);
		},
		methods: {
			setData(data) {
				this.list = data
				if (!this.planetCalculator) {
					this.planetCalculator = new PlanetCalculator({
						ctx: this.ctx,
						width: this.width,
						height: this.height
					})
				}
				this.planetCalculator.setSize(this.width, this.height);
				this.planetCalculator.setData(this.list);
			},
			recordLastMovePoint(point) {
				this.lastMovePoint = {
					timeStamp: new Date().getTime(),
					...point
				}
			},
			onTouchStart(e) {
				clearTimeout(this.transitionTimer);
				this.planetCalculator?.stopAnimation();
				this.movePoints = [e.touches[0]]
				this.recordLastMovePoint(e.touches[0])
			},
			onTouchMove(e) {
				this.movePoints.push(e.touches[0]);
				this.movePoints = this.movePoints.slice(-2);
				const [p1, p2] = this.movePoints;
				this.planetCalculator.setAngleMove(p2.x - p1.x, p2.y - p1.y);
				this.planetCalculator.update();
			},
			onTouchEnd(e) {
				if (!this.lastMovePoint) return this.planetCalculator?.startAnimation();
				const lastP = this.lastMovePoint;
				const p = this.movePoints[1];
				if(!p || !lastP)return this.planetCalculator?.startAnimation();
				const dx = p.x - lastP.x;
				const dy = p.y - lastP.y;
				const timeStamp = new Date().getTime();
				const impulse = Math.sqrt(dx * dx + dy * dy) / (timeStamp - lastP.timeStamp) 
				if (impulse > MIN_IMPULSE) {
					let t = Math.ceil(impulse / T_K / this.stick);
					console.log(impulse,t)
					const ddx = 2 * dx / (1 + t) / t;
					const ddy = 2 * dy / (1 + t) / t;
					const fn = () => {
						this.planetCalculator.setAngleMove(t * ddx, t * ddy);
						this.planetCalculator.update();
						if (--t > 0) {
							this.transitionTimer = setTimeout(fn, 20)
						} else {
							this.planetCalculator?.startAnimation();
						}
					}
					fn()
				} else {
					this.planetCalculator?.startAnimation();
				}
				this.lastMovePoint = null;
			},
			canvasIdErrorCallback(e) {
				console.error(e.detail.errMsg)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.convas-box{
		background-color: #131313;
	}
</style>